<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script type="text/javascript" src="static/js/graph-annotator.js"></script>
<script type="text/javascript" src="static/js/definitions.js"></script>
<link rel="stylesheet" type="text/css" href="static/css/annotator.css"/>
</head>
<body>
    <ul>
        <div id="icon"></div>
        <h1>人 体 姿 态 标 注 器</h1>
        <button id="download-button" class="bar-button">下载标注</button>
    </ul>
    <div style="white-space:nowrap;">
        <div class="inline-block">
            <div style="white-space:nowrap;">
                <p class="message" style="margin:0 1em;"> 示 例 </p>
                <div class="inline-block" style="margin:5 3em;">
                    <p class="message" style="margin:20 0em;"> 背 面 </p>
                    <div id="example-back" style="margin:30 0em;"></div>
                </div>
                <div class="inline-block" style="margin:5 1.5em;">
                    <p class="message" style="margin:20 2em;"> 正 面 </p>
                    <div id="example-front" style="margin:30 2em;"></div>
                </div>
            </div>
        </div>
        <div class="inline-block">
            <p id="message" class="message" ></p>
            <div>
                <div class="inline-block">
                    <div>
                        <button id="clear-button" class="button" style="margin:0.15em 0">清空</button>
                    </div>
                    <div>
                        <button id="prev-button" class="button" disabled="disabled" style="margin:3.5em 0"><</button>
                    </div>
                </div>
                <div id="annotator" style="margin:15 1.5em;"></div>
                <div class="inline-block">
                    <div>
                        <button id="next-button" class="button" style="margin:5em 0">></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
  <script type="text/javascript">
    var image_num = 0;
    nodeColor = function(which) { return (which == 1) ? [255, 255, 255] : [255, 255, 0];}
    nodeVisibility = function(which) { return (which == 1) ? 1 : 0;}
    
    window.onload = function() {
      example1 = createExample(document, "static/images/tshirt_front.png", example1_nodes, 'front');
      example2 = createExample(document, "static/images/tshirt_back.png", example2_nodes, 'back');
      
      // Create a main annotation.
      var annotator = creatAnnotator(document, ++image_num, example1, example2);
      
      /* Set up the Clear Button */
      document.getElementById('clear-button').addEventListener('click', function(event) {
        annotator.setNodeAttributes({position: undefined});
        example1.setNodeAttributes({color: null, diameter: 3});
        example2.setNodeAttributes({color: null, diameter: 3});
        example1.setNodeAttributes(0, {color: [255, 0, 0], diameter:5});
        example2.setNodeAttributes(0, {color: [255, 0, 0], diameter:5});
        document.getElementById('message').innerHTML = '点击 ' + nodes[0].name;
      });
      
      /* Set up the Export Button */
      document.getElementById('download-button').addEventListener('click', function(event){
        var anchor = document.createElement('a');
        if (graphs.length == image_num-1){
            graphs.push(deepCopy(graph));
        } else {
            graphs[image_num-1] = deepCopy(graph);
        }
        var dataURL = 'data:application/json;charset=utf-8,' +
                      encodeURIComponent(JSON.stringify(toResult(graphs)));
                           
        anchor.setAttribute('download', 'graph.json');
        anchor.setAttribute('href', dataURL);
        anchor.style.display = 'none';
        document.body.appendChild(anchor);
        anchor.click();
        document.body.removeChild(anchor);
      });
      
      /* Set up the Next Button */
      document.getElementById('next-button').addEventListener('click', function(event) {
        /* Save Graph */
        if (graphs.length == image_num-1){
            graphs.push(deepCopy(graph));
        } else {
            graphs[image_num-1] = deepCopy(graph);
        }
        /* Clear Graph */
        annotator.setNodeAttributes({position: undefined});
        example1.setNodeAttributes({color: null, diameter: 3});
        example2.setNodeAttributes({color: null, diameter: 3});
        /* Create New Annotator */
        annotator = creatAnnotator(document, ++image_num, example1, example2);
        /* Lock Next Button on the Last Image */
        /* Unlock Prev Button on the Second Image */
        if (image_num == 10){
            document.getElementById('next-button').setAttribute('disabled', 'disabled');
        } else if (image_num == 2){
            document.getElementById('prev-button').removeAttribute('disabled', 'disabled');
        }
      });
      
      /* Set up the Prev Button */
      document.getElementById('prev-button').addEventListener('click', function(event) {
        /* Save Graph */
        graphs[image_num-1] = deepCopy(graph);
        /* Clear Graph */
        annotator.setNodeAttributes({position: undefined});
        example1.setNodeAttributes({color: null, diameter: 3});
        example2.setNodeAttributes({color: null, diameter: 3});
        /* Create New Annotator */
        annotator = creatAnnotator(document, --image_num, example1, example2);
        /* Lock Prev Button on the First Image */
        /* Unlock Next Button on the Last Image */
        if (image_num == 1){
            document.getElementById('prev-button').setAttribute('disabled', 'disabled');
        } else if (image_num == 9) {
            document.getElementById('next-button').removeAttribute('disabled', 'disabled');
        }
      });
    }
  </script>
</body>
</html>
